<template>
  <view class="bgxx-page">
    <view class="changes-list">
      <view class="change-item" v-for="(change, index) in changes" :key="index">
        <view class="change-header">
          <view class="header-item">
            <image
              src="https://apizx01.sc798.com/Resource/assets/bgxx/time.png"
              mode="aspectFit"
              class="header-icon"
            ></image>
            <text class="header-label">变更时间</text>
            <text class="header-value">{{ change?.changeDate }}</text>
          </view>
          <view class="header-item">
            <image
              src="https://apizx01.sc798.com/Resource/assets/bgxx/content.png"
              mode="aspectFit"
              class="header-icon"
            ></image>
            <text class="header-label">变更类型</text>
            <text class="header-value">{{ change?.changeItem }}</text>
          </view>
        </view>
        <view class="change-content">
          <view class="change-before">
            <view class="content-label">变更前</view>
            <view class="content-details">{{ change?.beforeContent }}</view>
          </view>
          <view class="change-after">
            <view class="content-label">变更后</view>
            <view class="content-details">{{ change?.afterContent }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="loading-status" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
    <view class="no-more" v-if="!hasMore">
      <text class="no-more-text">没有更多数据了</text>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'

const changes = reactive([])
const loading = ref(false)
const hasMore = ref(true)
const params = reactive({
  creditcode: '',
  category: '04',
  pageNum: 1,
  pageSize: 10,
})

const getChanges = async (isLoadMore = false) => {
  if (loading.value) return
  loading.value = true
  try {
    const res = await uni.request({
      url: 'https://apizx01.sc798.com/api/proxy/enterprise/basic/basic',
      method: 'POST',
      data: params,
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
    })
    if (res.data.code === 200) {
      const newData = res.data.rows || []
      if (isLoadMore) {
        changes.push(...newData)
      } else {
        changes.splice(0, changes.length, ...newData)
      }
      hasMore.value = newData.length === params.pageSize
      if (newData.length < params.pageSize) {
        hasMore.value = false
      }
    } else {
      uni.showToast({
        title: res.data.msg,
        icon: 'none',
      })
    }
  } catch (err) {
    console.error('请求失败:', err)
    uni.showToast({
      title: '网络请求失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

const loadMore = async () => {
  if (!hasMore.value || loading.value) return
  params.pageNum++
  await getChanges(true)
}

onReachBottom(() => {
  loadMore()
})

onLoad(async (options) => {
  params.creditcode = options?.creditcode
  params.pageNum = 1
  hasMore.value = true
  await getChanges()
})
</script>

<style lang="scss" scoped>
.bgxx-page {
  min-height: 100vh;
  background-color: #f2f4f8;
  padding: 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  .changes-list {
    .change-item {
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 25rpx;
      padding: 30rpx 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      &:active {
        transform: scale(0.98);
        box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
      }
      .change-header {
        padding: 0 10rpx;
        .header-item {
          display: flex;
          margin-bottom: 8rpx;
          .header-icon {
            width: 23rpx;
            height: 23rpx;
            margin-top: 7.5rpx;
          }
          .header-label {
            color: #727272;
            width: 133rpx;
            margin-left: 12rpx;
          }
          .header-value {
            flex: 1;
          }
        }
      }
      .change-content {
        display: flex;
        padding-top: 20rpx;
        .change-before,
        .change-after {
          flex: 1;
          .content-label {
            background-color: #f2f4f8;
            border-radius: 8rpx;
            color: #727272;
            margin-bottom: 20rpx;
            padding: 6rpx 15rpx;
          }
          .content-details {
            padding: 0 10rpx;
            font-size: 25rpx;
            word-break: break-all;
            line-height: 1.5;
          }
        }
        .change-before {
          border-right: 1rpx solid #f2f4f8;
          padding-right: 15rpx;
        }
        .change-after {
          padding-left: 15rpx;
        }
      }
    }
  }
  .loading-status {
    text-align: center;
    padding: 30rpx;
    .loading-text {
      color: #999;
      font-size: 28rpx;
    }
  }
  .no-more {
    text-align: center;
    padding: 30rpx;
    .no-more-text {
      color: #ccc;
      font-size: 26rpx;
    }
  }
}
</style>
